﻿<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>导入配置</title>
    <jsp:include page="/resources/inc/head.jsp" flush="true"/>
</head>

<body class="md-skin full-height-layout">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="fh-breadcrumb">
        <div class="fh-column" style="width: 340px;">
            <div class="float-e-margins">
                <div class="ibox-content mailbox-content">
                    <div class="file-manager" style="height: 280px;">
                        <h5>数据表</h5>
                        <div class="full-height-scroll">
                            <ul class="folder-list m-b-md">
                                <c:forEach var="table" items="${tables}" varStatus="status">
                                    <li>
                                        <a href="javascript:;">
                                            <div>
                                                    ${table}
                                            </div>
                                        </a>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                        <h5 class="tag-title">数据字段</h5>
                        <ul id="tag-list" class="tag-list" style="padding: 0">

                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="full-height">
            <div class="full-height-scroll white-bg border-left">
                <div class="animated fadeInRight">
                    <div class="mail-box-header">
                        <h2>
                            导入配置区域
                        </h2>
                        <div class="mail-tools tooltip-demo m-t-md">
                            <div class="btn-group pull-right">
                                <button class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i></button>
                                <button class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i></button>
                            </div>
                            <span>错误机制：</span>
                            <select id="error">
                                <option value="1">跳过</option>
                                <option value="2">禁用</option>
                            </select>
                            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left"
                                    title="Refresh inbox"><i class="fa fa-refresh"></i> Refresh
                            </button>
                            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top"
                                    title="Mark as read"><i class="fa fa-eye"></i></button>
                            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top"
                                    title="Mark as important"><i class="fa fa-exclamation"></i></button>
                            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top"
                                    title="Move to trash"><i class="fa fa-trash-o"></i></button>

                        </div>
                    </div>
                    <div class="mail-box">
                        <table id="table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Mainly scripts -->
<jsp:include page="/resources/inc/footer.jsp" flush="true"/>

<script>
    var $table = $('#table');
    $(function () {
        // bootstrap table初始化
        $table.bootstrapTable({
            url: '${basePath}/manage/permission/list',
            height: getHeight() - 150,
            striped: true,
            search: false,
            showRefresh: false,
            showColumns: false,
            minimumCountColumns: 2,
            clickToSelect: false,
            detailView: false,
            pagination: false,
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'permissionId',
            maintainSelected: true,
            columns: [
                {field: 'permissionId', title: '编号', align: 'center'},
                {field: 'systemId', title: '字段'},
                {field: 'pid', title: 'Excel列明'},
                {field: 'name', title: '唯一性'},
                {field: 'type', title: '类型', formatter: 'typeFormatter'},
                {field: 'permissionValue', title: '描述'},
                {
                    field: 'action',
                    title: '操作',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });
    });

    // 格式化操作按钮
    function actionFormatter(value, row, index) {
        return [
            '<a class="update" href="javascript:;" onclick="updateAction(' + row.permissionId + ')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
            '<a class="delete" href="javascript:;" onclick="deleteAction(' + row.permissionId + ')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }

    // 格式化图标
    function iconFormatter(value, row, index) {
        return '<i class="' + value + '"></i>';
    }

    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value == 1) {
            return '目录';
        }
        if (value == 2) {
            return '菜单';
        }
        if (value == 3) {
            return '按钮';
        }
        return '-';
    }

    // 格式化状态
    function statusFormatter(value, row, index) {
        if (value == 1) {
            return '<span class="label label-success">正常</span>';
        } else {
            return '<span class="label label-default">锁定</span>';
        }
    }

    loadColumns("sch_social_file");
    function loadColumns(table_name) {
        $.ajax({
            type: 'get',
            url: '${basePath}/manage/excel/getTableColumns?table_name=' + table_name,
            success: function (result) {
                var data = result.columns;
                var columnListStr = "";
                var $ul = $("#tag-list");
                for (var i = 0; i < data.length; i++) {
                    columnListStr += '<li><a href="#" onclick="addRow(\'' + data[i].columnName + '\',\'' + data[i].columnType + '\',\'' + data[i].columnComment + '\')" data-name=' + data[i].columnName + ' data-type=' + data[i].columnType + ' data-comment=' + data[i].columnComment + '> ' + data[i].columnName + '</a></li>';
                }
                $ul.empty();
                $ul.append(columnListStr);
            }
        });
    }

    //新增行
    function addRow(dataName, dataType, dataComment) {
        alert($('#table').bootstrapTable('getOptions').totalRows)
        var data = {'permissionId': dataName, 'name': dataComment};
        //$('#table').bootstrapTable('prepend', data);
        $('#table').bootstrapTable('append', data);
    }

    // 新增
    var createDialog;
    function createAction() {
        createDialog = $.dialog({
            theme: 'Material',
            animation: 'RotateXR',
            animationSpeed: 300,
            keyboardEnabled: true,
            columnClass: 'col-md-6 col-md-offset-3',
            title: '新增权限',
            content: 'url:${basePath}/manage/permission/create',
            onContentReady: function () {
                initMaterialInput();
                $('select').select2();
            }
        });
    }


    // 编辑动作
    var updateDialog;

    function updateAction(permissionId) {
        if (permissionId != null) {
            doUpdate(permissionId);
        } else {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length != 1) {
                $.confirm({
                    title: false,
                    content: '请选择一条记录！',
                    autoClose: 'cancel|3000',
                    backgroundDismiss: true,
                    buttons: {
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            } else {
                doUpdate(rows[0].permissionId);
            }
        }
    }

    // 更新数据
    function doUpdate(permissionId) {
        updateDialog = $.dialog({
            theme: 'Material',
            animation: 'RotateXR',
            animationSpeed: 300,
            keyboardEnabled: true,
            columnClass: 'col-md-6 col-md-offset-3',
            title: '编辑权限',
            content: 'url:${basePath}/manage/permission/update/' + permissionId,
            onContentReady: function () {
                initMaterialInput();
                $('select').select2();
                initType();
                initSelect2();
            }
        });
    }

    // 删除动作
    var deleteDialog;

    function deleteAction(permissionId) {
        if (permissionId != null) {
            var ids = new Array();
            ids.push(permissionId);
            doDelete(ids);
        } else {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length == 0) {
                $.confirm({
                    title: false,
                    content: '请至少选择一条记录！',
                    autoClose: 'cancel|3000',
                    backgroundDismiss: true,
                    buttons: {
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            } else {
                var ids = new Array();
                for (var i in rows) {
                    ids.push(rows[i].permissionId);
                }
                doDelete(ids);
            }
        }
    }

    //删除数据
    function doDelete(ids) {
        deleteDialog = $.confirm({
            type: 'red',
            animationSpeed: 300,
            title: false,
            content: '确认删除该权限吗？',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'waves-effect waves-button',
                    action: function () {
                        $.ajax({
                            type: 'get',
                            url: '${basePath}/manage/permission/delete/' + ids.join("-"),
                            success: function (result) {
                                if (result.code != 1) {
                                    if (result.data instanceof Array) {
                                        $.each(result.data, function (index, value) {
                                            $.confirm({
                                                theme: 'dark',
                                                animation: 'rotateX',
                                                closeAnimation: 'rotateX',
                                                title: false,
                                                content: value.errorMsg,
                                                buttons: {
                                                    confirm: {
                                                        text: '确认',
                                                        btnClass: 'waves-effect waves-button waves-light'
                                                    }
                                                }
                                            });
                                        });
                                    } else {
                                        $.confirm({
                                            theme: 'dark',
                                            animation: 'rotateX',
                                            closeAnimation: 'rotateX',
                                            title: false,
                                            content: result.data.errorMsg,
                                            buttons: {
                                                confirm: {
                                                    text: '确认',
                                                    btnClass: 'waves-effect waves-button waves-light'
                                                }
                                            }
                                        });
                                    }
                                } else {
                                    deleteDialog.close();
                                    $table.bootstrapTable('refresh');
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                $.confirm({
                                    theme: 'dark',
                                    animation: 'rotateX',
                                    closeAnimation: 'rotateX',
                                    title: false,
                                    content: textStatus,
                                    buttons: {
                                        confirm: {
                                            text: '确认',
                                            btnClass: 'waves-effect waves-button waves-light'
                                        }
                                    }
                                });
                            }
                        });
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    }
</script>
<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
</script>
</body>

</html>
